<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: libowu
  Date: 18-10-20
  Time: 下午8:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
        body{
            background: rgba(0,0,0,0);
        }
        .fu-parent{
            position: absolute;
            width: 50%;
            left: 25%;
            height: 100%;
            background: rgba(0,0,0,0.3);

        }
        .fu-detailHead{
            height: 40%;
            width: 100%;
            overflow: hidden;
        }
        img{
            width: 100%;
            display: block;
            overflow: hidden;
        }

        .fu-content{
            height: 60%;
            width: 100%;
            padding: 20px;
        }

        .fu-content .info{
            display: block;
            margin-bottom: 16px;
            font-size: 22px;
            color: white;
        }
        .fu-content span label{
            font-weight: 700;
        }
        .fu-content{
            height: 60%;
            width: 100%;
            background: rgba(0,0,0,0.3);
            position: relative;
        }
        .fu-option{
            text-align: center;
            align-content: center;
            position: absolute;
            width: 50%;
            bottom: 20px;
            left: 25%;
        }
        .fu-option button{
            margin-left: 10px;
        }

        .fu-edit{
            width: 100%;
            height: 100%;
            position: absolute;
        }



        .input-group{
            width: 100%;
            height: 40px;
            margin-bottom: 40px;
        }
        .input-group:first-child{
            margin-top: 20px;
        }
        .input-group span{
            height: 100%;
        }
        .input-group input{
            height: 100%;
        }

        .fu-edit .fu-content{
            text-align: center;
            align-content: center;
            padding-left: 15%;
            padding-right: 15%;
        }


        .fu-choose{
            text-align: left;
            align-content: start;
            font-size: 18px;
            color: white;
            margin-bottom: 20px;
            display: flex;
        }

        .fu-choose label{
            margin-right: 20px;
        }

        .fu-choose .fu-chooseTy{
            flex: 1;
            text-align: right;
            align-content: end;
        }

        .fu-choose .fu-chooseSe{
            flex: 1;
            text-align: left;
            align-content: start;
        }


        .fu-al{
            height: 60px;
            width: 200px;
            position: absolute;
            top: 20px;
            left: 46%;
            background: green;
            border-radius: 10px;
            color: white;
            text-align: center;
            align-content: center;
            font-size: 16px;
            line-height: 60px;
            display: none;
        }
    </style>

</head>
<body>

<div class="fu-parent">

    <form method="post" name="form" action="/futer/userSettingSub">
        <div class="fu-box fu-edit">
            <div class="fu-detailHead">
                <img src="/img/appLogo/ysn.jpeg"/>
            </div>

            <div class="fu-content">
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">姓名</span>
                    <input type="text" class="form-control" aria-describedby="basic-addon1" required="required" name="name" value="${sessionScope.user.name}" placeholder="请输入昵称">
                </div>

                <c:if test="${sessionScope.user.type=='admin'}">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon8">密码</span>
                        <input type="password" class="form-control" aria-describedby="basic-addon1"  required="required" name="password" value="${sessionScope.user.password}" placeholder="密码长度必须为6-10位" maxlength="10" minlength="6">
                    </div>
                </c:if>


                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon9">年龄</span>
                    <input type="number" class="form-control"  aria-describedby="basic-addon1"  min="0" max="200" name="age" value="${sessionScope.user.age}" placeholder="年龄必须在0-200之间">
                </div>

                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon3">地址</span>
                    <input type="text" class="form-control"  aria-describedby="basic-addon1" name="address" value="${sessionScope.user.address}" placeholder="请输入地址">
                </div>

                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon4">学历</span>
                    <input type="text" class="form-control" aria-describedby="basic-addon1"  name="education" value="${sessionScope.user.education}" placeholder="请输入学历">
                </div>


                <div class="fu-choose">

                    <div class="fu-chooseSe">
                        <c:if test="${sessionScope.user.sex=='男'}">
                            <span>性别：</span><label><input type="radio" name="sex" checked value="男"/>男</label>
                            <label><input type="radio" name="sex" value="女"/>女</label>
                        </c:if>

                        <c:if test="${sessionScope.user.sex=='女'}">
                            <span>性别：</span><label><input type="radio" name="sex"  value="男"/>男</label>
                            <label><input type="radio" name="sex" value="女" checked/>女</label>
                        </c:if>

                    </div>

                </div>



                <div class=" fu-option " >
                    <button type="submit" class="btn btn-info" >保存</button>
                </div>
            </div>

        </div>
    </form>

    <div class="fu-al" id="al">
        保存成功
    </div>
</div>


<script type="text/javascript">

    if ('${login}'=='login'){
        parent.sengToLogin();
    }

    if ('${result}'!=null || '${result}'!=''){
        if ('${result}'=='1'){
            setTimeout(hide,2000);
            (document.getElementById("al")).style.zIndex='999';
            (document.getElementById("al")).style.display='block';
            (document.getElementById("al")).style.backgroundColor='green';
            (document.getElementById("al")).innerText='修改成功';
        } else if ('${result}'=='0') {
            setTimeout(hide,2000);
            (document.getElementById("al")).style.zIndex='999';
            (document.getElementById("al")).style.display='block';
            (document.getElementById("al")).style.backgroundColor='red';
            (document.getElementById("al")).innerText='修改失败';
        }
    }

    function hide(){
        (document.getElementById("al")).style.display='none';
    }

</script>
</body>
</html>
